<template>
	<view class="diagnosis-page">
		<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm" labelWidth="" class="border-box">
			<h4 style="margin-bottom: 20rpx;">项目信息</h4>
			<u-form-item :label="userInfo.type?'检查医院':'就诊医院'" prop="bookedHospitalId" borderBottom ref="item1">
				<u-cell-group :border="false">
					<picker @change="bindHospital" :value="indexH" :range="columnH" range-key="hospitalName">
						<u-cell :border="false" title="" :value="indexH!=null?columnH[indexH].hospitalName:'请选择您要预约的医院'"
							:isLink="true"></u-cell>
					</picker>
				</u-cell-group>
			</u-form-item>
			<u-form-item  :label="userInfo.type?'检查科室':'就诊科室'" prop="bookedOfficeId" @click="chooseObj" borderBottom ref="item1">
				<u-cell-group :border="false">
					<picker @change="bindOffice" :value="indexO" :range="columnO" range-key="administrativeName"
						:disabled="!userInfo.bookedHospitalId">
						<u-cell :border="false" title=""
							:value="indexO!=null?columnO[indexO].administrativeName:'请选择您要预约的科室'"
							:isLink="true"></u-cell>
					</picker>
				</u-cell-group>
			</u-form-item>
			<u-form-item :label="userInfo.type?'期望检查时间':'期望就诊时间'" prop="expectTime" borderBottom ref="item1">
				<u-cell-group :border="false">
					<uni-datetime-picker :clear-icon="false" type="datetime" v-model="userInfo.expectTime" />
				</u-cell-group>
			</u-form-item>
			<u-form-item label="陪诊时长" style="padding-top: 20rpx;" ref="item1" v-show="!userInfo.type">
				<view class="choose-time">
					<u-button type="primary" @click="userInfo.duration='全天陪诊'" size="small" color="#62BBA0"
						shape="circle" text="全天陪诊" :plain="userInfo.duration!='全天陪诊'"></u-button>
					<u-button type="primary" @click="userInfo.duration='半天陪诊'" size="small" color="#62BBA0"
						shape="circle" text="半天陪诊" :plain="userInfo.duration!='半天陪诊'"></u-button>
				</view>
			</u-form-item>
		</u--form>
		<view class="detail-msg">
			<h4 style="margin-bottom: 20rpx;">{{userInfo.type?'检查人':'就诊人'}}</h4>
			<view class="box-lists">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="0" scroll-left="0">
					<view class="scroll-item" v-for="item in msgList" :key="item.id"
						:class="item.name==userInfo.clinicUserName?'isCheckItem':''">
						<view class="centerTip">
							<view class="scrollitem1">
								<span>{{item.name}}</span>
								<u-icon name="edit-pen" color="#76BEAA" size="22" @click="showEdit(item)"></u-icon>
							</view>
							<view class="scrollitem2">
								<u-icon :name="item.gender?'man':'woman'" :color="item.gender?'#2979ff':'#D06F96'"
									size="20"></u-icon>
								<span>{{item.gender?'男':'女'}}</span>
								<span>{{item.age}}岁</span>
							</view>
						</view>
					</view>
					<view class="scroll-item" @click="openAdd">
						<view class="centerTip addTip">
							<u-icon name="plus" color="#2979ff" size="28"></u-icon>
						</view>
					</view>
				</scroll-view>
				<u-divider text="" :hairline="true"></u-divider>
				<view style="font-size: 28rpx;margin-bottom: 20rpx;">
					患者备注<span style="color: #BBBCBE;">（非必填）</span>
				</view>
				<textarea v-model="userInfo.remark" placeholder-style="font-size: 22rpx;"
					style="height: 180rpx;border: 1px solid #BBBCBE;border-radius: 20rpx;padding: 20rpx"
					placeholder="请输入注意事项或其他需求" />
			</view>
		</view>
		<u-button @click="$u.throttle(submit, 500)" class="sumbits">提交</u-button>
		<u-popup :show="showAdd" mode="center" class="digBox">
			<u--form labelPosition="right" :model="model1" :rules="rules" ref="uForms" class="digForm"
				labelWidth="auto">
				<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.name" fontSize="12" border="none" placeholder="请输入姓名"></u--input>
				</u-form-item>
				<u-form-item label="性别" prop="userInfo.gender" borderBottom @click="showSex = true" ref="item1">
					 <uni-data-select
					 placeholder="请选择性别"
					      v-model="model1.userInfo.gender"
					      :localdata="columnA"
					    ></uni-data-select>
				</u-form-item>
				<u-form-item label="手机号" prop="userInfo.phone" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.phone" fontSize="12" border="none"
						placeholder="请输入手机号"></u--input>
				</u-form-item>
				<u-form-item label="年龄" prop="userInfo.age" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.age" fontSize="12" border="none" placeholder="请输入年龄"></u--input>
				</u-form-item>
			</u--form>
			<view class="btm-sb">
				<u-button @click="$u.throttle(submits, 500)" class="sumbits">提交</u-button>
				<u-button @click="closeDig()" class="sumbits closeBth">取消</u-button>
			</view>

		</u-popup>
	</view>
</template>

<script>
	import {
		findClinicMessageByUser,
		findAllHospital,
		trativeOfficeByHospital,
		addClinicMessage,
		addMessageData
	} from "@/common/api/index.js"
	export default {
		data() {
			return {
				checkedId: 1,
				userInfo: {
					bookedHospitalId: '',
					bookedOfficeId: '',
					expectTime: "",
					duration: "全天陪诊",
					clinicUserName: "",
					clinicUserAge: "",
					clinicUserPhone: "",
					clinicUserGender: "",
					type: 0,
					remark: ""
				},
				model1: {
					userInfo: {
						"name": "",
						"age": "",
						"phone": "",
						"gender": "",
						"wxUserId": JSON.parse(uni.getStorageSync('doctorInfo')).id
					},
				},
				columnA: [{
						text: '男',
						value: 0
					},
					{
						text: '女',
						value: 1
					}
				],
				selectAender: "",
				msgList: [],
				indexH: null,
				indexO: null,
				showAdd: false,
				showTime: false,
				columnH: [],
				columnO: [],
				rules: {
					'bookedHospitalId': {
						type: 'number',
						required: true,
						message: '请选择医院',
						trigger: ['blur', 'change']
					},
					'bookedOfficeId': {
						type: 'number',
						required: true,
						message: '请选择科室',
						trigger: ['blur', 'change']
					},
					'expectTime': {
						type: 'string',
						required: true,
						message: '选择就诊时间',
						trigger: ['blur', 'change']
					},
					'userInfo.name': {
						type: 'string',
						required: true,
						max: 10,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.gender': {
						type: 'number',
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					'userInfo.phone': [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur'],
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: [ 'blur'],
					}],
					'userInfo.age': {
						type: 'number',
						required: true,
						message: '请输入正确年龄',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			};
		},
		onLoad(opt) {
			// console.log(opt)
			this.userInfo.type = Number(opt.type)
			if(this.userInfo.type==0){
				uni.setNavigationBarTitle({ title: "就医陪诊" });
			}else{
				uni.setNavigationBarTitle({ title: "预约检查" });
			}
			this.userInfo.expectTime = this.$u.timeFormat(Number(new Date()), 'yyyy-mm-dd hh:MM:ss')
		},
		onShow() {
			//就诊人信息
			this.getUsemsg()
			//就诊医院
			this.hospitals()
		},
		methods: {
			async getUsemsg() {
				let res = await findClinicMessageByUser()
				this.msgList = res.data
				if (res.data.length > 0) {
					this.userInfo.clinicUserName = this.msgList[0].name
					this.userInfo.clinicUserAge = this.msgList[0].age
					this.userInfo.clinicUserPhone = this.msgList[0].phone
					this.userInfo.clinicUserGender = this.msgList[0].gender
				}
			},
			sexSelect(e) {
				this.model1.userInfo.gender = e.gender
				this.selectAender = e.name
			},
			async hospitals() {
				let res = await findAllHospital()
				// console.log('医院：',res)
				this.columnH = res.data

			},
			async Offices() {
				let res = await trativeOfficeByHospital(this.userInfo.bookedHospitalId)
				// console.log('科室：', res)
				this.columnO = res.data
			},
			chooseObj() {
				if (!this.userInfo.bookedHospitalId) return uni.showToast({
					icon: 'none',
					position: 'top',
					title: '请先选择医院！'
				});
			},
			bindHospital(e) {
				this.indexH = e.detail.value
				this.userInfo.bookedHospitalId = this.columnH[this.indexH].id
				this.Offices()
			},
			bindOffice(e) {
				this.indexO = e.detail.value
				this.userInfo.bookedOfficeId = this.columnO[this.indexO].id
			},
			submit() {
				this.$refs.uForm.validate().then(async res => {
					if (!this.userInfo.clinicUserName) return uni.$u.toast('请添加就诊/挂号人信息')
					let datas = await addMessageData(this.userInfo)
					console.log(datas)
					uni.showToast({
					  icon: 'success',
					  position: 'top',
					  title: '添加成功！'
					});
				}).catch(errors => {
					// uni.$u.toast('校验失败',errors)
					// console.log(this.userInfo)
				})
			},
			openAdd(){
				 if(this.model1.userInfo.id){
					 delete this.model1.userInfo.id
				 }
				 this.showAdd=!this.showAdd
			},
			//修改人员信息
			showEdit(item){
				console.log(item)
				this.model1. userInfo= item
				this.showAdd = true
			},
			//新增人员信息
			submits() {
				this.$refs.uForms.validate().then(async res=> {
					let datas = await addClinicMessage(this.model1.userInfo)
					console.log(datas)
					if(datas.code==200){
						uni.$u.toast('添加成功！')
						this.getUsemsg()
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			closeDig(){
				this.$refs.uForms.clearValidate()
				this.$refs.uForms.resetFields()
				this.showAdd = false 
			}
		},
		onReady() {},
	};
</script>
<style lang="scss" scoped>
	.diagnosis-page {
		width: 100vw;
		background-color: #F7F8FA;
		padding: 15rpx;
	}

	::v-deep .u-form-item__body {
		padding: 10rpx 0;
	}

	::v-deep .u-cell__body {
		padding-right: 0px;
	}

	::v-deep .u-cell__value {
		font-size: 24rpx;
		font-weight: 400;
		color: #A5A6A7;
		line-height: 24rpx;
	}

	::v-deep .uni-date-x--border {
		border: none;
		text-align: right;

	}

	::v-deep .uni-date__x-input {
		font-size: 26rpx;
		font-weight: 400;
		color: #A5A6A7;
	}

	::v-deep .uni-date-x {
		flex-direction: row-reverse;
	}

	.border-box {
		padding: 20rpx;
		border: 4rpx solid #3776EA;
		border-radius: 20rpx;
		background-color: #fff;
	}

	::v-deep .u-popup__content {
		padding: 30rpx;
		border-radius: 30rpx;
		width: 80%;
	}

	::v-deep .uni-select {
		border: none;
		padding-left: 0rpx;
		.uni-select__input-placeholder{
			color: rgb(192, 196, 204);
		}
	}

	.digBox {
		.digForm {
			width: 100%;
			// padding: 30rpx;
		}

		.btm-sb {
			display: flex;
			flex-direction: row-reverse;

			.closeBth {
				background-color: #fff;
				color: #000;
			}
		}
	}

	.detail-msg {
		width: 100%;
		margin-top: 20rpx;

		.box-lists {
			width: 100%;
			background-color: #fff;
			box-shadow: 0rpx 0rpx 10rpx 4rpx rgba(0, 0, 0, 0.06);
			border-radius: 20rpx;
			padding: 20rpx;

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;

				.scroll-item {
					width: 264rpx;
					height: 170rpx;
					display: inline-block;
					background-color: #F7F8FC;
					margin-right: 20rpx;
					border-radius: 20rpx;
					text-align: center;
					position: relative;

					.centerTip {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						padding: 22rpx;

						.scrollitem1 {
							width: 100%;
							display: flex;
							align-items: flex-end;
							justify-content: space-between;
						}

						.scrollitem2 {
							width: 100%;
							display: flex;
							gap: 10rpx;
							font-weight: 400;
							position: absolute;
							bottom: 22rpx;
						}
					}

					.addTip {
						text-align: center;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 50rpx;
					}
				}

				.isCheckItem {
					padding: 20rpx;
					border: 1px solid #76BEAA;
					background-color: rgba(118, 190, 170, .2);
				}
			}
		}

	}

	.choose-time {
		width: 100%;
		display: flex;
		justify-content: right;
		text-align: right;
	}

	::v-deep uni-button {
		margin-left: 10rpx;
		margin-right: 0;
	}

	.sumbits {
		// border: 1px solid red;
		background-color: #62BBA0;
		color: #fff;
		border-radius: 40rpx;
		width: 40%;
		margin: 0 auto;
		margin-top: 30rpx;
	}
</style>